<template>
  <!--  面包屑-->
  <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/main' }">主页</el-breadcrumb-item>
    <el-breadcrumb-item>
      <a href="/post">贴吧列表</a>
    </el-breadcrumb-item>
    <el-breadcrumb-item>
      <a href="/postdetails">贴吧详情</a>
    </el-breadcrumb-item>
  </el-breadcrumb>


  <div class="app-intro">
    <div class="head">

      <div class="miaoshu">
        <div class="title" style="text-align: center;">
            <p>
              标题：{{posttitle}}
            </p>
        </div>
            <p style="color: #999999">{{postcreateTime}}</p>
      </div>
    </div>
<!--    贴吧-->
    <div class="body" style="height: auto">
      <div class="left">
        <div class="jianjie" style="font-size: 25px; color: cadetblue" >
          内容：{{postcontent}}
          <el-divider />
        </div>
        <ul>
          <li v-for="item in PostreList" :key="item.id">

              <p style="font-size: 15px;color: cornflowerblue; margin-top: 0px">
                <el-avatar :size="50" :src="(item.userAvatar)"></el-avatar>
                   用户名：{{item.userName}}
              </p>
            <p style="margin-left: 10px;margin-top: 5px; font-size: 18px">回复:{{item.content}} </p>

              <el-divider />
          </li>
        </ul>
      </div>
<!--  个人信息-->
      <div class="right" style="height: auto">
        <div class="tea-box">
          <h2>贴吧主人个人信息</h2>
          <div class="tea-infor">
            <p>
              <el-avatar :size="50" :src="useravatar"></el-avatar>
            </p>
            <p>id：{{ userid }}</p>
            <p  style="margin-top: 11px">用户名：{{ username }}</p>
            <p class="line">邮箱：{{useremail}}</p>
            <p>身份：{{ userrole }}</p>
            <p>性别：{{ usersex }}</p>
            <p>个人描述：{{ userdescribe }}</p>
            <div class="teaname">
              <span>{{tename}}</span>
            </div>
          </div>

        </div>
      </div>
    </div>

  </div>
</template>
<script setup>
import {onMounted, ref,reactive} from 'vue'
import {useRoute} from 'vue-router'
import userApi from "../api/public/home";

const route = useRoute()

let id=ref("");

const  userid=ref('')
const  username=ref('')
const  useremail=ref('')
const  useravatar=ref('')
const  userrole=ref('')
const  usersex=ref('')
const  userdescribe=ref('这人很懒，什么都没写')
const  userstatus=ref('')

let PostreList=reactive([])
//帖子表
const postid=ref('')
const posttitle=ref('')
const postcontent=ref('')
const postcreateTime=ref('')
const postuserId=ref('')
const postlikes=ref('')
const postreplies=ref('')
const poststatus=ref('')
const uid=ref([])
//回帖表
// const  reid=ref('')
// const  postre_userid=ref('')
// const  postrecontent=ref('')
// const  postrestatus=ref('')

onMounted(()=>{
  getpostList();
})

//获取帖子表
function getpostList(){
  id=route.query.id
  console.log("传过来的id：",id)
  userApi.postSearch(id).then((response)=>{
    let list=response.data.data;
    postid.value=list.id
    posttitle.value=list.title
    postcontent.value=list.content
    postcreateTime.value=list.createTime
    postuserId.value=list.userId
    postlikes.value=list.likes
    postreplies.value=list.replies
    poststatus.value=list.status
    userApi.postreSearch(id).then((res)=>{
      PostreList=res.data.data;
      // for (let i = 0; i < PostreList.length; i++) {
      //   uid.value.push(PostreList[i].id);
      //   console.log(" uid[i].value", uid[i].value)
      // }
      console.log("PostreList", PostreList)
      userseacher();
    })

    // reuserSeacher();
  })

}
// function reuserSeacher(){
//   // console.log("PostreList.id",PostreList)
//   userApi.postuserSearch(PostreList.userId).then(response => {
//     console.log("response =", response);
//     let list2= response.data.data.data;
//     userid.value=list2.id;
//     username.value=list2.name;
//     useremail.value=list2.email;
//     useravatar.value=list2.avatar;
//     userrole.value=list2.role;
//     usersex.value=list2.sex;
//     userdescribe.value=list2.describe;
//     userstatus.value=list2.status;
//   })
// }

function userseacher() {
    userApi.postuserSearch(postuserId.value).then(response => {
      // console.log("response =", response);
      let list1= response.data.data.data;
      userid.value=list1.id;
      username.value=list1.name;
      useremail.value=list1.email;
      useravatar.value=list1.avatar;
      userrole.value=list1.role;
      usersex.value=list1.sex;
      userdescribe.value=list1.describe;
      userstatus.value=list1.status;
    })
}




</script>
<style scoped>
.app-intro{

  width: 1100px;
  margin: 0 auto;
}
.head{
  margin-top: 30px;
  width: 1100px;
  display: flex;
  padding-bottom: 20px;
  border-bottom: 1px solid #000;
  margin-bottom: 20px;
}
img{
  width: 400px;
  height: 180px;
}
.miaoshu{
  margin-left: 20px;
  flex:1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

}
.miaoshu .title{
  font-size: 30px;

}
.miaoshu .jianjie{
  font-size: 18px;
}
.title{
  display: flex;
  justify-content: space-between;
}
.count{
  margin-right: 20px;
  text-align: center;
}
.icon-zan{
  font-size: 26px;
}
.body{
  display: flex;
}
.left{
  flex:1;
  background-color: #fff;
  margin-right: 20px;
  border-radius: 5px;
  border:1px solid #d6c8c8;
  padding: 20px;
}
.right{
  width: 300px;
  height: 300px;
  background-color: #fff;
  border-radius: 5px;
  border:1px solid #d6c8c8;
}
.tea-box h2{
  padding: 10px 15px;
  font-weight: normal;
}
.tea-infor{
  padding: 20px;
  /*display: flex;*/
  height: 100%;
}
.teaname{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding-left: 16px;
}
.tea-box p{
  margin-left: 20px;
  margin-top: 10px;
}
/* .left img{
    width: 600px;
    height: 400px;
} */
ul{
  list-style: none;
}
ul li{
  font-size: 18px;
  margin-left: 10px;
}

.addbut{
  margin-bottom: 10px;
}
.line{
  display: block;
  margin-bottom: 10px; /* 调整行间距 */
}

</style>
